<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>小练习2-JS进阶（一）</title>
    </head>
    <body class="cols">
        <pre>
            <code>
                    // 小练习2：请分析以下代码中函数test的执行上下文中，变量对象创建和执行的过程

                    function test(foo, bar) {
                        console.log(foo);
                        console.log(bar);

                        var foo = 20;
                        console.log(foo);
                        var bar = function () {
                            return 40;
                        }
                        console.log(bar);

                        function foo() {
                            return 30;
                        }
                    }

                    test(10, 100);
            </code>
        </pre>
        <pre>
            <code>
                    // 执行上下文变量对象创建和执行过程
                    // 创建阶段
                     testEC = {
                         VO: {
                             arguments: {
                                 0: 10,
                                 1: 100,
                                 length: 2
                             },
                             foo: < foo reference > , // function声明覆盖了形参foo的声明;
                                                    // var声明变量遇到同名属性值时，会跳过
                             bar: 100 // var声明变量遇到同名属性值时，会跳过
                         },
                         scopeChain: {...},
                         this: window
                     }

                    // 执行阶段 VO -> AO
                     testEC = {
                         AO: {
                             arguments: {
                                 0: 10,
                                 1: 100,
                                 length: 2
                             },
                             foo: 20,
                             bar: < bar reference >
                         },
                         scopeChain: {...},
                         this: window
                     }

            </code>
        </pre>
        <pre>
            <code>
                    // 变化顺序后
                    function test(foo, bar) {
                        function foo() {
                            return 30;
                        }
                        var foo;
                        var bar;
                        console.log(foo);
                        console.log(bar);
                        foo = 20;
                        console.log(foo);
                        bar = function () {
                            return 40;
                        }
                        console.log(bar);
                    }

                    test(10, 100);
            </code>
        </pre>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/p_2.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>